<template>
  <section class="component policy-execution-record">
    <data-form :model="model" @onSearch="refreshData" :page="pageService" hiddenReset>
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="customerName">
          <el-input v-model="model.customerName"></el-input>
        </el-form-item>
        <el-form-item label="运行时间" prop="checkTime">
          <el-date-picker v-model="model.checkTime" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box @onPageChange="refreshData" :data="dataSet" :page="pageService">
      <template slot="columns">
        <el-table-column label="运行时间" prop="runningTime" :min-width="$helper.getColumnWidth(6)" :formatter="row => $filter.dateTimeFormat(row.runningTime)"></el-table-column>
        <el-table-column label="订单编号" prop="caseNumber" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column label="客户姓名" prop="customerName" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <!-- <el-table-column label="产品名称" prop="productName" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
        <el-table-column label="催收总金额" prop="overdueAmount" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column label="逾期期数" prop="overduePeriod" :min-width="$helper.getColumnWidth(3)" :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`M${row.overduePeriod}`"></el-table-column>
        <el-table-column label="逾期天数" prop="overDueDays" :min-width="$helper.getColumnWidth(3)"></el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="close()">关闭</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop, Emit, Model } from "vue-property-decorator";
import { Form } from "element-ui";
import { namespace } from "vuex-class";
import { ValidatorService } from "~/utils/validator.service";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { StrategyConfigService } from "~/services/dataimp-service/strategy-config.service";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class PolicyExecutionRecord extends Vue {
  @CollectionExecutionModule.Mutation private updateRunningData;
  @Dependencies(StrategyConfigService) private strategyConfigService: StrategyConfigService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Prop({
    type: String
  })
  private policyId: string;

  private model: any = {
    name: "",
    caseNumber: "",
    customerName: "",
    checkTime: []
  };
  private dataSet: any = [];
  @Emit("close")
  private close() {
    this.model.caseNumber = ''
    this.model.customerName = ''
    this.model.checkTime = []
  }

  private mounted() {
    this.refreshData();
  }
  private refreshData() {
    this.model.id = this.policyId;
    this.strategyConfigService
      .queryStrategyConfigDetailData(this.model, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
        // this.updateRunningData(data[0].runningTime);
      });
  }
}
</script>

<style lang="less" scoped>
</style>
